<template>
	<view>
		<!-- <u-sticky offset-top="0"> -->
		<view style="position: fixed;width: 100%;z-index: 50;">
			<view class="search-bar" :class="['nav',isBlock ? '' : 'nav-to']">
				<u-search placeholder="输入城市名称查询" v-model="search" :clearabled="true" :show-action='false' height="56"
					@change="onChange" width="706" style="width: 702rpx; height: 66rpx;"></u-search>
			</view>
		</view>

		<!-- </u-sticky> -->
		<view style="padding-top: 66rpx;">
			<!-- 搜索列表 -->
			<view v-show="isShow" scroll-y='true'>
				<view v-for="(item,index) in a" :key='item.id' class="searchList">
					<view @click="onCity(item)">{{item.name}}</view>
				</view>
				<view style="font-size: 30rpx; color: rgb(120,120,120);text-align: center;" v-show="a.length===0">
					-----暂无地址-----
				</view>
			</view>

			<view v-show="search==='' || isListShow">
				<view>
					<!-- 当前定位 -->
					<view style="margin: 20rpx 0;">
						<view class="header">
							<view class="flex" style="width: 70%;margin-left: 20rpx;font-weight: bolder;">
								<view>当前选择：</view>
								<view class="flex flex-ai-c">
									<view>
										<text>{{vuexCity}}</text>
										<text style="margin-left: 10rpx;">{{vuexDistrict}}</text>
									</view>
								</view>

							</view>
							<view class="flex flex-jc-fe" style="width: 20%;color: #989898;" @click="chooseDown">
								<view>
									选择区县
									<i-icon icon="iconxiala1"></i-icon>
									<!-- <u-icon name="arrow-up"></u-icon> -->
								</view>
							</view>
						</view>

						<view class="choose">
							<view class="flex flex-jc-c" style="width: 100%;" v-show="lodding">
								<u-loading mode="circle" :show="lodding"></u-loading>
							</view>
							<view v-show="downShow" class="flex flex-wrap-w">
								<view v-for="(item,index) in findDistrict" class="cell-list2" @click="choose(item)"
									:key='index'>
									<view>{{item.name}}</view>
								</view>
							</view>

						</view>
					</view>

					<view class="flex" style="width: 70%;margin-left: 20rpx;margin: 20rpx;font-size: 24rpx;">
						<view>当前定位：</view>
						<view class="flex flex-ai-c">
							<text v-if="!successAdd" @click="location">定位未开启(重新获取定位)</text>
							<view v-else @click="chooseCity">
								<text>{{res.address.city}}</text>
								<text style="margin-left: 10rpx;">{{res.address.district}}</text>
							</view>
							<u-loading mode="circle" :show="isGetAdd" size="24"></u-loading>
						</view>

					</view>
					<!-- 热门地址 -->
					<view style="background-color: rgb(245,245,245);line-height: 80rpx;">
						<view style="margin-left: 20rpx;">热门城市</view>
						<view class="choose2">
							<view v-for="(item,index) in gotList" class="cell-list2" style="background-color: #fff;"
								:key='item.id'>
								<view @click="onHot(item)">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>

				<page-loading :show='pageLoading' mode='if'>
					<view class="city" @click="onBlur">
						<u-index-list :sticky="false" :index-list="indexList" :scrollTop="scrollTop">
							<view v-for="(item, index) in cityList" :key="index">
								<u-index-anchor :index="item.letter" />
								<view>
									<view class="list-cell" v-for="(item1, index1) in item.data" :key="item1.id"
										@tap="addrestype(item1)">
										<text>{{item1.name}}</text>
									</view>
								</view>
							</view>
						</u-index-list>
					</view>
				</page-loading>
			</view>

		</view>
		<u-toast ref="uToast" />
	</view>

</template>


<script src="./selectCity.js"></script>

<style lang="scss" scoped>
	/deep/.u-index-anchor {
		color: #CF9D6A !important;
	}

	@import './selectCity.scss';
</style>
